<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="jqcontextmenu.css" />
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jqcontextmenu.js"></script>
	<style>
		.myhighlight{
			background-color:#DEDEDE;
		}
		.myjqhover{
			background-color:#DEDEDE;
		}
	</style>

	<script type="text/javascript">

	//Usage: $(elementselector).addcontextmenu('selector',actions,options)

	jQuery(document).ready(function($){
		$('p').addcontextmenu('contextmenu1',{
			'item1':{
				click:function(source,li){
					//alert(source);
					alert(source.attr('id'));
				}
			},
			'item2':{
				click:function(source,li){
					alert(source.attr('id')+":"+li.attr('id'));
				},
				disabled:function(source,li){
					if(source.attr('id')=='dp'){
						return true;
					}
					return false;
				}
			},
			'item31':{
				click:function(source,li){
					alert(li.attr('id'));
				}
			},
			'item521':{
				click:function(source,li){
					alert(li.attr('id'));
					//alert(li.attr('id'));
				}
			}
		},{highlight:'myhighlight',hover:'myjqhover'}); //apply context menu to links with class="mylinks"

		
	$('#div').addcontextmenu('contextmenu1',{
			'item1':{
				click:function(source,li){
					//alert(source);
					alert(source.attr('id'));
				}
			},
			'item2':{
				click:function(source,li){
					alert(source.attr('id')+":"+li.attr('id'));
				},
				disabled:function(source,li){
					if(source.attr('id')=='dp'){
						return true;
					}
					return false;
				}
			},
			'item31':{
				click:function(source,li){
					alert(li.attr('id'));
				}
			},
			'item521':{
				click:function(source,li){
					alert(li.attr('id'));
					//alert(li.attr('id'));
				}
			}
		},{click:'left'}); 
	});

	</script>
	</head>
	<body>
		<p id="dp"><a class="mylinks" href="http://www.dynamicdrive.com" id="dynamic">Dynamic Drive</a></p>
		<p id="dp2"><a class="mylinks" href="#" id="dynamic2">Dynamic Drive2</a></p>
		<div id="div" style="float:right">dadfasd</div>
		<!--HTML for Context Menu 1-->
		<ul id="contextmenu1" class="jqcontextmenu">
		<li id="item1"><div>Item 1a</div></li>
		<li class="sep"></li>
		<li id="item2"><div>Item 2a</div></li>
		<li id="item3"><div>Item Folder 3a</div>
			<ul>
			<li id="item31"><div>Sub Item 3.1a</div></li>
			<li id="item3.2"><div>Sub Item 3.2a</div></li>
			<li id="item3.3"><div>Sub Item 3.3a</div></li>
			<li id="item3.4"><div>Sub Item 3.4a</div></li>
			</ul>
		</li>
		<li id="item4"><div>Item 4a</div></li>
		<li id="item5"><div>Item Folder 5a</div>
			<ul>
			<li id="item5.1"><div>Sub Item 5.1a</div></li>
			<li id="item5.2"><div>Item Folder 5.2a</div>
				<ul>
				<li id="item521"><div>Sub Item 5.2.1a</div></li>
				<li id="item5.2.2"><div>Sub Item 5.2.2a</div></li>
				<li id="item5.2.3"><div>Sub Item 5.2.3a</div></li>
				<li id="item5.2.4"><div>Sub Item 5.2.4a</div></li>
				</ul>
			</li>
			</ul>
		</li>
		<li id="item6"><div>Item 6a</div></li>
		</ul>
	</body>
</html>